<template>
  <div class="header">
    <!-- top -->
    <div class="top">
      <div class="top-tabs">
        <i class="el-icon-s-operation" style="font-size: 20px;color: #909693;"></i>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" style="border: none;"
                 default-active="$route-path" router>
          <!-- 下拉列表 -->
          <el-submenu index="2">
            <template slot="title">更多</template>
            <el-menu-item index="2-1">暂定标签1</el-menu-item>
            <el-menu-item index="2-2">暂定标签2</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">暂定标签3</template>
              <el-menu-item index="2-4-1">暂定标签1.3.1</el-menu-item>
              <el-menu-item index="2-4-2">暂定标签1.3.2</el-menu-item>
              <el-menu-item index="2-4-3">暂定标签1.3.3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item v-for="(v,i) in tabs" :key="i" :index="v.path">{{ v.title }}</el-menu-item>
        </el-menu>
        <span style="color: #909693;font-size: 14px;">|</span>
      </div>
      <!-- 机构下拉切换 -->
      <div class="selectChoose">
        <el-dropdown trigger="click" style="cursor: pointer;">
					<span class="el-dropdown-link">
						{{ docName }}
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(v,i) in select" :key="i"
                              :index="v.path">{{ v.title }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>|</span>
      </div>
      <!-- notice -->
      <div class="notice">
        <li v-for="(item,index) in notice" :key="index">
          <i :class="item.icon" style="font-size: 24px;"></i>
          <span>{{ item.title }}</span>
        </li>
      </div>
      <div class="top-userinfo">
        <!-- userinofo -->
        <!-- username -->
        <span style="margin-right: 12px;font-size: 12px;">{{ username }}</span>
        <!-- avatar -->
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                   class="el-avatar"></el-avatar>
        <el-dropdown @command="HandleCommand" style="cursor: pointer;">
					<span class="el-dropdown-link">
						<i class="el-icon-setting" style="font-size: 20px;"></i>
					</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
            <el-dropdown-item command="loginout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </div>
    <!-- bottom -->
    <div class="bottom">
      <!-- 面包屑 -->
      <!-- <i class="el-icon-arrow-left" style="font-size: 20px;"></i> -->
      <el-breadcrumb separator-class="">
        <el-breadcrumb-item
            :to="{ path: item.path }"
            v-for="item in breads"
            :key="item.title"
        >{{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- last -->
    <div class="last" v-if="PrentTile">
			<span v-if="PrentTile"
            style="
			margin: 8px;
			color: #fff;
			font-weight: bold;
			display:inline-block;
			background-color: #00557f;
			height: 28px;
			width: 60px;
			text-align: center;
			line-height: 28px;
			padding: 4px;">{{ PrentTile }}</span>
      <el-tabs style="height: 40px;" type="card" closable
               v-model="activeTabsIndex"
               @tab-click="clickTab"
               @tab-remove="removeTab">
        <el-tab-pane
            v-for="(item, index) in editableTabs"
            :to="item.path"
            :key="item.title"
            :label="item.title"
            :name="item.path"
        >
          <!-- 		  <router-view></router-view> -->
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
// selfs / js
import tabs from '../../external/tabs.js'
import select from '../../external/select.js'
import watermark from "@/untils/watermark";

export default {
  components: {
    tabs
  },
  data() {
    return {
      // num
      oddIndex: 0,
      // str
      PrentTile: '',
      activeTabsIndex: '',
      // arr
      userinfo: [],
      breads: [],// 监听bus存放的Breads数据
      editableTabs: [],
      tabs: [],
      select: [],
      notice: [{
        title: '我的消息',
        icon: 'el-icon-chat-line-round'
      },
        {
          title: '系统通知',
          icon: 'el-icon-message-solid'
        },
      ],
      // top下的tabs
      activeIndex: '1',
      // 测试username
      username: 'admin',
      docName: '宜宾九阵诊所'
    }
  },
  //侦听器
  watch: {
    "$route.path"() {
      this.getBreads();
    },
    $route(to, from) {
      let flag = false;

      // 当前页面菜单已打开
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (to.path == this.editableTabs[i].path) {
          this.activeTabsIndex = this.editableTabs[i].path;
          // console.log(this.editableTabs[i].path+'pppppppppp',this.activeTabsIndex);
          flag = true;
          break;
        }
      }
      // console.log(this.$route.matched[0]);
      // 判断是否二级路由并且打开新的页面
      if (!flag && this.$route.matched[0].redirect != this.$route.matched[1].redirect) {
        this.editableTabs.map(v => {
          v.path
          // console.log(v,'---------------');
        })

        let obj = {
          title: to.meta.title,
          path: to.path,
          closable: true
        };
        this.PrentTile = this.$route.matched[0].meta.title
        this.activeTabIndex = to.path;
        this.editableTabs.push(obj);
      }

    },
  },
  created() {
    this.getBreads();
    //监听bus是否有传值
  },
  mounted() {
    this.userinfo = JSON.parse(localStorage.getItem('userInfo'))
    // console.log(this.userinfo);
    this.username = this.userinfo.userName
    // 模拟信息
    this.tabs = tabs.map(function (v) {
      return v
    })
    this.select = select.map(function (v) {
      return v
    })
  },
  methods: {
    // tabs
    tab(v, i) {
      console.log(v, i);
    },
    HandleCommand(command) {
      console.log(command);
      if (command === 'userinfo') {
        //跳转至个人中心
        this.$router.push('/Acc/userinfo')
      } else if (command === 'loginout') {
        //退出登录
        //清除本地存储，跳转到登录页面
        watermark.clear();
        localStorage.clear();
        sessionStorage.clear();
        this.$message({
          type: "success",
          message: '欢迎下次登录~',
        })

        this.$router.push('/login');
      }
    },
    //计算面包屑
    getBreads() {
      let temp = [{path: "/", title: "首页"}];
      this.$route.matched.forEach((v) => {
        // console.log(v);
        if (v.meta.path && v.meta.title) {
          this.activeTabsIndex = v.meta.path
          temp.push(v.meta)
        }
      });
      this.breads = temp;
    },
    clickTab(tab) {
      // console.log(tab.paneName);
      this.$router.push({path: tab.paneName});
    },
    removeTab(targetName) {
      // 删除的是当前选中的页面
      // console.log(targetName , this.activeTabsIndex);
      if (this.activeTabsIndex === targetName) {
        this.editableTabs.forEach((item, index) => {
          // console.log(item.path + '8888888888',targetName);
          if (item.path == targetName) {
            let nextTab = item[index + 1] || item[index - 1]
            if (nextTab) {
              this.activeTabsIndex = nextTab.path;
            }
          }
        });
      }
      this.editableTabs.forEach((item, index) => {
        // console.log(item.path , targetName);
        if (item.path == targetName) {
          // eslint-disable-next-line no-return-assign
          return (this.oddIndex = index);
        }
      });
      this.editableTabs.splice(this.oddIndex, 1);
      // console.log(this.editableTabs[this.editableTabs.length - 1] + 'sahhdasuihfnoiajsnoij+');
      // 更新路由
      this.$router.push({path: this.editableTabs[this.editableTabs.length - 1].path});
    },

  },

}
</script>

<style lang="less" scoped>

/* 
 Others - color
 --    0       1      2       3      4      5       6    --
 --  太空黑  深空灰  党徽红  支付蓝  微信绿  美团黄  淘宝橙  --
 */
// $bgc0: #181818;
// $bgc1: #36495d;
// $bgc2: #cc0033;
// $bgc3: #00a0e9;
// $bgc4: #1AAD19;
// $bgc5: #f0b442;
// $bgc6: #ff6700;
// $bgc:  #f8f8f8;
/* 
渐变  
lg-b  上>下, lg-r 左>右 (线性) 
rg-c circle,（径向）
 ===>>> lg-c多彩糖果渐变  lg-h热带夏日渐变  lg-s雪山冰川渐变  lg-g金属质感渐变 lg-t星空夜幕渐变 lg-p少女粉渐变
*/
/deep/ .el-icon-close:before {
  content: "\e680";
  font-size: 12px;
}

/deep/ .el-icon-arrow-down:before {
  content: "\e659";
  font-size: 18px;
}

.header {
  // padding: 0 12px;
  display: flex;
  flex-direction: column;

  // nav
  .top {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 2px #fff;
    background-color: #fff;

    .top-tabs {
      display: flex;
      align-items: center;
      background-color: #fff;
      // 穿透外部样式
      /deep/ .el-submenu__title {
        font-size: 12px;
        background-color: #fff;
      }

      /deep/ .el-menu-item {
        font-size: 12px;
        background-color: #fff;
      }

      // /deep/.el-menu.el-menu--horizontal{
      // 	border: none;
      // }
    }

    // 机构切换下拉列表
    .selectChoose {
      display: flex;
      justify-content: left;
      align-items: center;

      span {
        margin: 8px;
        font-size: 12px;
      }
    }

    .notice {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 8px;

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 8px;

        span {
          margin-top: 4px;
          font-size: 10px;
        }
      }
    }

    .top-userinfo {
      display: flex;
      align-items: center;
      flex: 0.6;

      .el-avatar {
        margin-right: 12px;
      }
    }
  }

  // bottom
  .bottom {
    display: flex;
    align-items: center;
    padding: 8px;
    height: 20px;
    // li
    ::v-deep .el-breadcrumb__inner {
      cursor: pointer !important;
      font-size: 12px;
    }
  }

  .last {
    background-color: #f8f8f8;
    // border: 1px solid #fff;
    ::v-deep .el-tabs__content {
      display: none;
      height: 0;
      width: 0;
    }

    span {
      font-size: 12px;
    }

    display: flex;
    align-items: center;
    vertical-align: middle;

    ::v-deep .el-tabs__nav {
      font-size: 12px !important;
      border: 0;
      background-color: #fff;
      border-radius: 0;
    }

    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
      font-size: 12px !important;
      border: 0;
      padding-left: 4px;
    }

    ::v-deep .el-tabs__item {
      font-size: 12px !important;
      border: 0;
    }

    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
      font-size: 12px !important;
      border: 0;
    }

    ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
      font-size: 12px;
      color: #039aff;
    }
  }
}
</style>